<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/login.css">
    <script src="/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="/js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="/js/jquery.form.js" charset="UTF-8"></script>
    <script src="/js/global.js" charset="UTF-8"></script>
    <script src="/js/login.js" charset="UTF-8"></script>
    <title>U袋网 - 登录 / 注册</title>
</head>
<body>
<div id="vuebox">
<div class="public-head-layout container">
    <a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
</div>
<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
    <div class="login-layout container">
        <div class="form-box login">
            <div class="tabs-nav">
                <h2>欢迎登录U袋网平台</h2>
            </div>
            <div class="tabs_container" >
                <form class="tabs_form" th:action="@{/buyer/secutity/do/login.html}"  method="post"  id="login_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="login_phone" v-model="phone" required placeholder="手机号"
                                   maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" v-model="password" id="login_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
                        </label>
                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="login_error">
                            <!-- 错误信息 范例html
                            <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>密码错误</strong> 请重新输入密码
                            </div>
                             -->
                        </div>
                    </div>
                    <p th:if="${param.error}" th:text="用户名或密码输入错误！"></p>
                    <!--secrity安全框架登陆-->
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="submit">
                        登录
                    </button>
                    <!--自己写的登陆-->
                   <!-- <button class="btn btn-large btn-primary btn-lg btn-block submit" @click.stop="login_submit" id="login_submit" type="button">
                        登录
                    </button>-->
                    <br>
                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>

                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">登录成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box register">
            <div class="tabs-nav">
                <h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="index.html" method="post" id="register_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="register_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="smscode" id="register_sms" placeholder="输入验证码"
                                   type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="register_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a
                                href="temp_article/udai_article3.html">U袋网用户协议</a>
                        </label>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="register_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit"
                            type="button">注册
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">注册成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box resetpwd">
            <div class="tabs-nav clearfix">
                <h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="https://rpg.blue/member.php?mod=logging&action=login" method="post"
                      id="resetpwd_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="resetpwd_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="sms" id="resetpwd_sms" placeholder="输入验证码" type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="resetpwd_pwd" placeholder="新的密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="resetpwd_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit"
                            type="button">重置密码
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">密码重置成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                // 判断直接进入哪个页面 例如 login.php?p=register
                switch ($.getUrlParam('p')) {
                    case 'register':
                        $('.register').show();
                        break;
                    case 'resetpwd':
                        $('.resetpwd').show();
                        break;
                    default:
                        $('.login').show();
                }
                ;
                // 发送验证码事件
               /* $('.getsms').click(function () {
                    var phone = $(this).parents('form').find('input.phone');
                    var error = $(this).parents('form').find('.error_msg');
                    switch (phone.validatemobile()) {
                        case 0:
                            // 短信验证码的php请求
                            error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));
                            $(this).rewire(60);
                            break;
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            break;
                    }
                });
                // 以下确定按钮仅供参考
                $('.submit').click(function () {
                    var form = $(this).parents('form')
                    var phone = form.find('input.phone');
                    var pwd = form.find('input.password');
                    var error = form.find('.error_msg');
                    var success = form.siblings('.tabs_div');
                    var options = {
                        beforeSubmit: function () {
                            console.log('喵喵喵')
                        },
                        success: function (data) {
                            console.log(data)
                        }
                    }
                    // 验证手机号参考这个
                    switch (phone.validatemobile()) {
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            return;
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            return;
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            return;
                            break;
                    }
                    // 验证密码复杂度参考这个
                    switch (pwd.validatepwd()) {
                        case 1:
                            error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
                            return;
                            break;
                        case 2:
                            error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
                            return;
                            break;
                        case 3:
                            error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
                            return;
                            break;
                    }
                    form.ajaxForm(options);
                    // 请求成功执行类似这样的事件
                    // form.fadeOut(150,function() {
                    // 	success.fadeIn(150);
                    // });
                })*/
            });
        </script>
    </div>




</div>



<div class="footer-login container clearfix">
    <ul class="links">
        <a href="">
            <li>网店代销</li>
        </a>
        <a href="">
            <li>U袋学堂</li>
        </a>
        <a href="">
            <li>联系我们</li>
        </a>
        <a href="">
            <li>企业简介</li>
        </a>
        <a href="">
            <li>新手上路</li>
        </a>
    </ul>
    <!-- 版权 -->
    <p class="copyright">
        © 2005-2017 U袋网 版权所有，并保留所有权利<br>
        ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel:
        18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
    </p>
</div>
</div>
</body>
</html>

<script>
   /* var id;//定时器的id,停止定时器时需要
    var count=60;//倒计时的时间,单位是秒
    $(function () {
        $("#sendCode").click(function(){
            //获取手机号
            var phone=$("#phone").val();
            if(phone.length==0){
                alert("手机号不能为空!");
                return;
            }
            //禁用按钮
            $(this).attr("disabled","disabled");
            //启动倒计时
            id=setInterval("time()",1000);
            //发送ajax
            $.getJSON("/user/sendCode.do",{phone:phone},function(result){
                if(result.msg("OK")){
                    alert("验证码已发出!");
                }else {
                    alert(result.msg);
                }
            })
        })

        $("#btnLogin").click(function(){
            var  code=$("#code").val();
            $.getJSON("/user/login.do",{code:code},function (result) {
                if(result.msg=="ok"){
                    location.href="/jsp/success_login.jsp";
                }else{
                    alert(result.msg);
                }
            })
        })

    });

    function time(){
        //剩余时间
        count--;
        if(count==0){
            //取消禁用
            $("#sendCode").removeAttr("disabled");
            //恢复60s
            count=60;
            $("#sendCode").val("重新发送");
            clearInterval(id);
        }else{
            //修改按钮文字
            $("#sendCode").val(count+"s后,重新发送");
        }
    }*/
</script>

<!--<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!--<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>-->
<script type="text/javascript" src="/js/axios.min.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vuebox",
        data: {
            phone: "",
            password: "",
			userList:"",
            new_buyer:{userid:"",phone:"",password:""},
            delResult:"",
        },methods:{
			login_submit:function () {
				axios.get("/login",{params:{phone:this.phone,password: this.password}}).then(res=>{
					this.userList=res.data;
                    if(this.userList.data.msg=="SUCCESS"){
                        alert("登陆成功!");
                        window.location.href="index.html?phone"+this.phone;
                        // window.location.href="houmain.html?username"+this.username;
                    }else{
                        alert("登陆失败!");
                        window.location.href="login.html";
                    }
				})
			},
           /* registBuyer:function () {
                axios.post("/regist/buyer",this.new_buyer).then(res=>{
                    this.new_buyer=res.data;
                        if(this.delResult.result=="SUCCESS"){
                            alert("注册用户信息成功!");
                            window.location.href="login.html";
                    }else{
                            alert("注册用户信息失败!");
                            alert(this.delResult.message);
                        }
                })

            }*/
		},mounted(){

		}
    })
</script>
